<template>
  <div v-loading="Loading" class="table" element-loading-text="数据更新中...">
    <div class="title">{{data.title}}</div>
    <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="SQLData.dataMapList" tooltip-effect="dark" height="calc(100% - 0px)">
      <el-table-column v-for="(item2, index2) in titleList.fieldList" :key="index2" align="center" width="auto">
        <template slot="header">
          <div style="word-break:keep-all;">{{item2.customFieldName}}</div>
          <div style="padding-top:10px;font-size:12px;font-weight:500;word-break:keep-all;">{{item2.fieldName}}</div>
        </template>
        <template slot-scope="scope">
          <div class="ellipsis">
            <span>{{ scope.row[item2.fieldName] }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  get_detail,
  executor_sql
} from "@/api/board/datasource.js";
export default {
  props: ['data'],
  data() {
    return {
      SQLData: {
        dataMapList: []
      },
      titleList: {
        fieldList: []
      },
      Loading: false
    }
  },
  watch: {
    data: {
      handler() {
        this.Loading = true
        this.getData()
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    async  getData() {
      await get_detail({ id: this.data.sourceId }).then(res => {
        this.titleList = res.data
      })
      let data = {
        executeSql: this.data.executeSql,
        limitCount: this.titleList.limitCount
      }
      if (this.data.executeSql) {
        await executor_sql(data).then((res) => {
          this.SQLData = res.data
        })
      }
      this.Loading = false
    },
  }
}
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  height: calc(100% - 48px);
}
.title {
  border: 1px solid #f2f2f2;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  padding: 10px 0;
}
</style>


